.fixed-bottom{position: fixed;bottom: 10px;	width: 84%;}
h4 .icon,h4 .icon-left{font-size:floor($font-size-base * 1.70);}  //add ++Ark++

.dark2, a.dark2 {
  color: $dark2;
}
.dark2-bg {
  background-color: $dark2;
}
.dark2-border {
  border-color: $button-dark-border;
}

.light2, a.dark2 {
  color: $dark2;
}
.light2-bg,
.wrap-light2{
  background-color:$light2;
}
.light2-border {
  border-color: $button-dark-border;
}

.attenuated, a.attenuated{
  color: $attenuated;
}
.attenuated-bg {
  background-color: $attenuated;
}
.attenuated-border {
  border-color: $attenuated;
}


.cute, a.cute{
  color: $cute;
}
.cute-bg {
  background-color: $cute;
}
.cute-border {
  border-color: $cute;
}


.cute-light, a.cute-light{
  color: rgba($cute,0.3);
}
.cute-light-bg {
  background-color: rgba($cute,0.1);
}
.cute-light-border {
  border-color: rgba($cute,0.5);
}

a{
	text-decoration:none;
}
//优化链接点击区域
.link-inline{
	position:relative;
	&:after{
		position: absolute;
		top: -6px;
		right: -6px;
		bottom: -6px;
		left: -6px;
		content: ' ';
	}
}
.link-royal{
	color:$royal;
	&.activated{
		color:$assertive;
	}
}
.link-dark{
	color:$dark;
	&.activated{
		color:$royal;
	}
}

/**
 * Content margin
 * --------------------------------------------------
 */
.nomargin{
	margin:0!important;
}
.margin {
  margin: $content-padding;
}

.margin-top,
.margin-vertical {
  margin-top: $content-padding;
}
.margin-top-small{
	margin-top: $content-padding /2;
}
.margin-right,
.margin-horizontal {
  margin-right: $content-padding;
}
.margin-right-small{
  margin-right: $content-padding / 2 + 2;
}
.margin-bottom,
.margin-vertical {
  margin-bottom: $content-padding;
}

.margin-left,
.margin-horizontal {
  margin-left: $content-padding;
}

.margin-left-small{
  margin-right: $content-padding / 2 + 2;
}

.margin-bottom-large{
	margin-bottom: $padding-large-horizontal;
}
.margin-top-large{
	margin-top: $padding-large-horizontal;
}

.no-padding{
	padding:0!important;
}

.font-small{font-size: $font-size-small;}
.corner-large{
	position: absolute;
    top: -40px;
    right: -23px;
    transform: rotate(30deg);
    font-size: $font-size-small;
    height: 60px;
    width: 100px;
    text-align: center;
    line-height: 96px;
    color: $light;
    opacity: 0.6;
    text-indent: 38px;
}


.icon-label:before{
	font-size: $button-icon-size;
	vertical-align: middle;
	padding-right: $content-padding;
	margin-bottom: 2px;
}

.selected-users .icon-label{
  margin: $content-padding;
  display: inline-block;
}

.scroll,.scroll-view{height: 100%;}


.footer-large{height:60px;}
.has-footer-large{bottom:60px;}
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}


//数据表格
.col{text-indent: 0;}
.data-table {
	.col{text-align:center;}
}

.col-half{flex:0.5 0.5;}

.col-fixed{flex:inherit;max-width:90px;}
.col-blank{flex:inherit;max-width:60px;}


.data-head{font-weight: 700;padding:$content-padding /2 $content-padding;
	& > :first-child .col-item{
		padding-left:$content-padding * 2;
	}
}

.inter-head{
	border: none;
	padding:0;
	.col{
		position: relative;
		padding:0;
		&:nth-child(2){border-left:1px solid $item-dark-border;}
	}
	.col-item{
		padding:0 $content-padding;
		line-height: 43px;
		display: block;
	}
	a.activated{
		background-color:rgba($light,0.2);
	}

}

.filter-box{
	z-index:2;	width: 100%;

	.close{
		position: absolute;
		top: 6px;
		right:5px;
		color:$dark2!important;
	}

	input.filter-input{
		position: absolute;
		top: 5px;
		left: 5px;
		padding: 0 10px;
		width: calc(100% - 10px);
	}
}

.data-body{
	.list{
	}
	header{
		background:$light2;
		span{
			display:inline-block;
      padding-top:$content-padding;
      padding-bottom: $content-padding;
			padding-left: $content-padding;
			position: relative;

			&.icon:before{
				font-size: $item-icon-font-size;
				position: absolute;
				top: 5px;
				left: 10px;
			}
		}

		.item-index{
			color:$light;
			text-indent: 0;
			// margin-left: -5px;
				padding-right: $content-padding;
			// padding-left: $item-icon-font-size + 10;
		}
		.index-icon{width: 90px;
			text-align: right;}
		.icon-right{
			float:right;
			margin: 0 $content-padding;
			font-size: $button-icon-size;
			line-height: 40px;
			color: $dark2;
		}
	}

	.row{padding-bottom:0;padding-left:0;padding-right:0;}
	@media (max-width: 480px) {
		.col {
			font-size: $font-size-base;
		}
	}
	 .item{padding:$content-padding;
	 	// text-indent:$content-padding / 2;
		&.activated{
			background:$light2;
		}
	}
}

.accordion-list{
	.sub-item{
		padding:0 $padding-large-horizontal;
	}
	.item-row{
		padding:$content-padding;
	}
	.item-accordion{
		background-color:rgba($royal,0.2);
		.button{
			line-height:inherit;
			padding: $content-padding;}
	}
}

.accordion-handle {
	border-left: 1px solid $light2;
}



.button-bar > .button .icon-top{
display: block;
	&:before{

		line-height: 1;
	}
}



.single-list{
	.item {
		margin-bottom: $padding-large-horizontal;
	}
}

.wrap-light{background-color:$light;}
.block{
	header{
		border-bottom: 1px solid #EEE;
		padding:0 $content-padding;
		h4{margin-top:0;}
	}
}
.block-title{
	position:relative;
	// padding:2px;
	text-align:center;
	// height:$bar-height;
	border:none;
	h5{
		flex: 1;
	}
	.button{
		font-size: $button-bar-button-font-size;

		// &.detail:before{
		// 	line-height: inherit;
		// }
	}
}


.ionic-contrib-blur {
  overflow: hidden;
	position:absolute;
  width: 100%;
	top:0;
	left:0;
	right:0;
	-webkit-filter:blur(20px);
	opacity:.25;
  z-index: 1;
}

.now-sell{min-height:200px;}

.sell-chart{
	min-height: 300px;

	.tabs{position:relative;top: 0;}
	.inner-content{
		top: inherit;
		bottom: inherit;
		height:auto;
		background-color:$light;
		padding-bottom:$item-padding;
	}

}

//图表

.chart-legend,.bar-legend,.line-legend,.pie-legend,.radar-legend,.polararea-legend,.doughnut-legend{
	list-style-type:none;
	margin-top:5px;text-align:center;-webkit-padding-start:0;-moz-padding-start:0;
	padding-left:0;
	li{
		display:inline-block;white-space:nowrap;position:relative;margin-bottom:4px;
		border-radius:5px;padding:0 8px 0 28px;font-size:smaller;cursor:default;
		span{
			display:block;position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px;}
	}
}



#sell-filter{
	box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);}

#filter-wrap{
	z-index: 9;
	background-color: rgba(0, 0, 0, 0.3);
}


.face{

	text-align: center;
	overflow: hidden;
	border: 5px solid #FFF;
	color: $royal;
	border-radius: 40px;
	background-color: #FFF;
}

//带缩略图的列表
.meta{
	font-size:$font-size-small;
	color:$dark2;
	time,span{
		margin-right: $padding-large-horizontal;
	}
}

.news{
	.meta{
		font-size:$font-size-small;
		padding:$content-padding / 2 0;
	}
	.description{
		color:$dark2;
		font-size:$font-size-small;
	}
	.spinner {
		display: block;
		text-align: center;
		svg{
			margin:50px;
			width: 48px;height:48px;
		}
	}
}
.article{
	header{
		text-align: center;
		h1{
			font-size: 22px;
			padding:$content-padding 0;
			margin:0;
		}
	}
	.content{
		line-height: 1.8;
		padding-bottom:$font-size-base * 2;
		p{
			text-indent:$font-size-base * 2;
			> img{
				margin-left:$font-size-base * -2;
			}
		}
		img{
			max-width: 100%;
			border: none!important;
		}
	}
}

.arrow{
	position: relative;


	&:after{
		content:'';
		position: absolute;
		width: 0;
		height: 0;
		line-height: 0;
		font-size: 0;
		border-width: 6px;
		border-style: dashed;
		border-color: rgba(0, 0, 0, 0);
		transition: transform 200ms 300ms;
		transform-origin: center;
	}

	&.activated{background:$light2;}
}
.right-bottom-arrow{
	&:after{
		border-right-style: solid;
		border-bottom-style: solid;
		border-right-color: $dark2;
		border-bottom-color: $dark2;
		bottom: 10px;
		right: 10px;
	}
	&.on:after{
		transform: rotateZ(45deg);
		border-right-color: $royal;
		border-bottom-color: $royal;
	}
}
.right-top-arrow{
	&:after{
		border-right-style: solid;
		border-top-style: solid;
		border-right-color: $dark2;
		border-top-color: $dark2;
    top: 0;
    right: 100%;
	}
	&.on:after{
		transform: rotateZ(45deg);
		border-right-color: $royal;
		border-bottom-color: $royal;
	}
}

.select-arrow{
	color:$dark2;
	transform: rotate(45deg);
	bottom: -10px;
	top: auto!important;
	right: 0!important;
}




.icon-block{
	width:22px;
	display:inline-block;
}

.supplier-detail{
	input{
		transition: text-align 300ms;
		text-align: left;
	}
	input[readonly]:not(.cloned-text-input), textarea[readonly]:not(.cloned-text-input){
 		text-align: right;
	}
}

.sidebar{
	// float: left;
	position: absolute;
	overflow: hidden;
	min-width: 90px;
	background-color: $light2;
	bottom: 0;
	z-index: 9;
	&.has-subheader{top: 89px;}
	&.has-header{top: 45px;}
	.item{
		background-color: $light2;
			border-color: $light3;
			   font-size: $font-size-base;
			     padding: $item-padding $content-padding;
		.badge{
			right:5px;
			color:$dark2;
			font-weight: 400;
			font-size:$font-size-small;
			padding:3px 5px;
		}
		&.activated{
			background-color: $light3;
		}
	}
}
// 选择商品表单
.product-select-list{
	.row{padding:0;	min-height: 98px;}
	.col{
		padding: $content-padding 0;
	}

	.accordion-handle{
		flex:inherit;
		min-width:40px;
		width:40px;
		.item-count{
			display:block;
		}
	}

	.item-checkbox{padding:0 0 0 100px;}
	.title{
		font-size:$font-size-base;
	}

	label.checkbox,.checkbox-icon{
		top: 0;
		left:0;
		right:40px;
		min-height: 98px;
		margin-top: 0;
		padding: 0;

		input{
			width: 40px;
			height: 80px;
			margin-top: -30px;
			margin-left: -10px;
			&:before{
				border-radius: 0;
				transform: rotate3d(0,0,1,45deg);
				background-color: rgba(#FFF,0.3);
				border: none;
			}
			&:checked:before{
				background-color: rgba($royal,0.8);
			}
			&:after{
				left: 20px;
				bottom: 35px;
				top: inherit;
			}
		}

	}
	.item-accordion{
		position: relative;
		left: -100px;
		background-color:transparent;
		margin-left: 0;
		.list{
			background-color:rgba($royal,0.1);
			margin-right: -100px;
			margin-top: 0;
			margin-left:0;
			padding-left: 100px;
			// padding-right:40px;
			.item {
				// width:calc(50% - 20px);
				// float:left;
				background-color:rgba(0,0,0,0);
				margin: 5px 20px 5px 0;
				border: none;
				padding: 0;
				.input-label{
					font-size:$font-size-base;
					padding:0 6px 0 0;
				}
				input{
					border-bottom:1px solid $dark2;
					padding-left:5px;
					padding-right:5px;}
				.icon{
					min-width: 38px;
					padding: 0;
					margin:0 6px;
					line-height: 42px;
					min-height: 42px;
					&:last-child{
						margin-right: 16px;
					}
				}

			}
		}
	}
}


// 订单列表
.order-list{
	.item-content{
		font-size:$font-size-base;
		padding:$content-padding $content-padding $content-padding $content-padding / 2;
	}
	.col-bottom{
		padding-bottom:$content-padding / 2;
	}
}
.item.row{padding:$content-padding;}

.tips{
	font-size:$font-size-base;
	color:$dark2;
}

.color-box{
	display:inline-block;
	vertical-align: middle;
	width:25px;
	height:25px;
	border-radius:3px;
	border:1px solid $dark2;
	box-shadow:inset 0 0 0 1px $light;
	margin-left:10px;
}

.always-has-header{top: $bar-height;}


.icon-legend{
    font-size: $font-size-small;
    color:$dark2;
    padding:$content-padding 0;
    .col{
    	padding:0;
    }
	.icon:before{font-size:$font-size-base *2;}
}

  .icon-left:before{
    padding-right: .3em;
  }
  .icon-right:before{
    padding-left: .3em;
  }


.state-history{
	// padding-top:6px;
	// padding-bottom:7px;
	.state,.state-icon{
		display:inline-block;
		text-align:center;
		border-radius:22px;
	}
	.state{
		position:relative;
		width:24px;
		height:24px;
		padding:1px;
		line-height:22px;
		margin-right:10px;
	}
	.state-icon{
		width:22px;
		height:22px;
	}

	&.state-current{
		.state-icon{
			color:$light;
		}
	}
	&:not(.state-current){
		.state-icon{
			background-color:$light;
		}
	}
	.col{
		line-height: 23px;
	}
}

.state-history-expend{
	&.item-borderless{
		border-left-width:1px;
	}

	.state-icon{
		&:after{
			content:'';
			width:1px;
			background:$royal;
			position: absolute;
			top: -30px;
			left: 12px;
			bottom:-50px;
			z-index: -1;
		}
	}

	&.last .state-icon:after{
		bottom: 0px;
	}

	&.state-current .state-icon:after{
		top: 0px;
	}
	&.item-button-right .button-col{
		bottom:33px;
	}
}


.product-property{
	&.on{
		background-color:lighten($royal,45%);
	}

	.prop-list{
		overflow: hidden;
		clear: both;
		border-top: 1px solid lighten($royal,40%);
		margin-top: $content-padding;
		padding-top: $content-padding;
		.prop-label{
			display:inline-block;
			min-width:55px;
			padding-right:5px;
		}
	}
}

.inventory-in{
	.prop-list{
		border-top:none;
	}
	textarea{
		width:100%;
		margin-top:$content-padding;
	}
}
.product-check{
	padding-left: 0;
	border: none;
	border-top: 1px solid $dark;
	margin-top: $content-padding;
	padding-top: $content-padding;
}
